<template>
  <view class="content">
    <view v-for="(item, index) in list" :key="index"
      style="background-color: white; border-radius:8rpx;padding:24rpx; margin-bottom:24rpx; position: relative;">
      <!-- <view style="display: flex;">
                <view>
                    <image style="width: 156rpx; height:156rpx;" src="../static/image/pagesMaintain/Group1.png"
                        mode="scaleToFill" />
                </view>
                <view style="flex: 1; margin-left:24rpx;">
                    <view>
                        <text style="font-weight: bold;font-size: 32rpx;color: #000000;">小张家电维修</text>
                    </view>
                </view>
            </view>
            <view style="display: flex; justify-content: space-between;">
                <view class="star">
                    <image style="margin-right: 4rpx;" src="../static/image/pagesMaintain/star.png"
                        v-for="(itemStar, indexStar) in Math.floor(star)" :key="indexStar" />
                    <image src="../static/image/pagesMaintain/halfstar.png" v-show="star % 1 !== 0" />
                    <text style="margin-left:24rpx; color: #999999;">{{ star }}分</text>
                </view>
                <view style="display: flex;align-items:center;">
                    <u-icon name="phone" color="#D12C25" size="28"></u-icon>
                    <text style="margin-left: 18rpx; color:#D12C25;">电话咨询</text>
                </view>
            </view> -->
      <view>

        <view class="text">
          <text>订单编号:{{ item.orderNum }}</text>
        </view>
        <view class="text">
          <text>服务师傅:{{ item.checkedPersonName }}</text>
        </view>
        <view class="text">
          <text>检测时间:{{ item.checkedTime }}</text>
        </view>
        <view class="text">
          <text>检测家电:{{ item.checkedHomeAppliances }}</text>
        </view>
        <view class="text">
          <text>检测说明</text>
        </view>
        <view class="texttwo">
          {{ item.checkedCondition }}
        </view>
      </view>
      <view style="display: flex;flex-wrap: wrap;  margin-top:24rpx;">
        <view :class="(index + 1) % 3 == 0 ? '' : 'your-class'" v-for="(item, index) in item.imgsList" :key="index">
          <image style="width: 198rpx; height: 116rpx; border-radius: 12rpx;" :src="item" mode="scaleToFill" @click="preview(item)"/>
        </view>
      </view>
      <view class="triangle" v-show="item.id == 0">
          <text class="example">示例</text>
        </view>
    </view>
  </view>
</template>

<script>
import { selectByUserId2 } from '@/api/maintain'
export default {
  data() {
    return {
      // 
      star: 2.2,
      value: '抽油烟机很干净',
      type: 'textarea',
      border: true,
      height: 170,
      autoHeight: true,
      list: []
    }
  },
  onShow() {
    this.getselectByUserId()
  },
  methods: {
    preview(img){
      uni.previewImage({
        urls: [img], // 需要预览的图片链接列表
      });
    },
    getselectByUserId() {
      selectByUserId2().then(res => {
        console.log('获取检测数据',res)
        res.data.unshift({
          "id":0,
          "checkedPersonName": "小明",
          // "checkedPersonNum": "141124199612070157",
          "checkedHomeAppliances": "冰箱",
          "checkedCondition": "检测说明",
          "riderId": "1844580120690561024",
          "userId": "1843910018408255488",
          "orderNum": "HXZX1853713106556030976",
          "checkedTime": "1999-11-06 11:17:34",
        })
        this.list = res.data
      })
    }
  }
}

</script>

<style lang="scss" scoped>
.content {
  padding: 32rpx;
  min-height: 100vh;
  background-color: #F5F5F5;

  .star {
    display: flex;
    align-items: center;

    image {
      width: 24rpx;
      height: 24rpx;
    }
  }

  .text {
    margin-top: 24rpx;
    font-weight: 400;
    font-size: 26rpx;
    color: #000000;
  }

  .texttwo {
    margin-top: 24rpx;
    width: 638rpx;
    height: 172rpx;
    border: 1rpx solid #ccc;
    padding: 8rpx 24rpx;
    border-radius: 12rpx;
    word-wrap:break-word;
  }

  .your-class {
    margin-right: 24rpx;
  }

  .triangle {
    position: absolute;
    width: 56rpx;
    height: 56rpx;
    background:linear-gradient(135deg,#5da859,#5da859 50%, transparent 50%,transparent 100%);
    left: 0;
    top: 0;
    color: #FFFFFF;

    .example {
      display: inline-block;
      transform: rotate(-45deg);
      font-size: 18rpx;
    }
   }
}
</style>